<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Agentic AI Performance Dashboard 2025</title>
  <!-- Light theme styles -->
  <style>
    :root {
      --bg-color: #f9fafb;
      --card-bg: #ffffff;
      --primary: #4f46e5;
      --secondary: #6366f1;
      --text-color: #1f2937;
      --muted-text: #6b7280;
    }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      line-height: 1.5;
    }

    header {
      background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
      color: #fff;
      padding: 1.5rem 1rem;
      text-align: center;
    }

    h1 {
      margin: 0 0 0.5rem 0;
      font-size: 1.75rem;
    }

    main {
      padding: 1rem;
      max-width: 1200px;
      margin: 0 auto;
    }

    .summary {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .card {
      background-color: var(--card-bg);
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      padding: 1rem;
      flex: 1 1 280px;
      text-align: center;
    }

    .card h2 {
      margin: 0.25rem 0 0.75rem;
      font-size: 1.25rem;
    }

    .charts {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    @media (min-width: 768px) {
      .charts {
        flex-direction: row;
      }
    }

    canvas {
      background-color: var(--card-bg);
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
      padding: 1rem;
    }
  </style>
  <!-- Chart.js CDN -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
</head>
<body>
  <header>
    <h1>Agentic AI Performance Dashboard 2025</h1>
    <p>Total records processed: <strong>5000</strong></p>
  </header>
  <main>
    <!-- Summary cards -->
    <section class="summary">
      <div class="card">
        <h2>Multimodal Processing</h2>
        <p class="muted-text">Records: 740</p>
        <p>Avg. Success Rate: 48.36%</p>
        <p>Avg. Accuracy: 57.10%</p>
        <p>Avg. Efficiency: 59.13%</p>
        <p>Avg. Cost/Task: 0.020¢</p>
      </div>
      <div class="card">
        <h2>Edge Deployment</h2>
        <p class="muted-text">Records: 2693</p>
        <p>Avg. Success Rate: 48.82%</p>
        <p>Avg. Accuracy: 57.17%</p>
        <p>Avg. Efficiency: 58.81%</p>
        <p>Avg. Cost/Task: 0.020¢</p>
      </div>
      <div class="card">
        <h2>Bias Detection</h2>
        <p class="muted-text">Records: 5000</p>
        <p>Avg. Success Rate: 49.07%</p>
        <p>Avg. Accuracy: 57.34%</p>
        <p>Avg. Efficiency: 58.89%</p>
        <p>Avg. Cost/Task: 0.019¢</p>
      </div>
    </section>

    <!-- Charts -->
    <section class="charts">
      <canvas id="successChart"></canvas>
      <canvas id="metricsRadar"></canvas>
    </section>
  </main>

  <script>
    // Data arrays
    const labels = ["Multimodal Processing", "Edge Deployment", "Bias Detection"];
    const successRates = [48.36, 48.82, 49.07];

    // Bar chart for Success Rate
    new Chart(document.getElementById("successChart"), {
      type: "bar",
      data: {
        labels,
        datasets: [{
          label: "Avg. Success Rate (%)",
          data: successRates,
          backgroundColor: [
            "rgba(79, 70, 229, 0.7)",
            "rgba(99, 102, 241, 0.7)",
            "rgba(165, 180, 252, 0.7)"
          ],
          borderRadius: 6
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: false },
          tooltip: {
            callbacks: {
              label: ctx => `${ctx.parsed.y.toFixed(2)}%`
            }
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            ticks: {
              callback: val => `${val}%`
            }
          }
        }
      }
    });

    // Radar chart for multiple metrics
    new Chart(document.getElementById("metricsRadar"), {
      type: "radar",
      data: {
        labels: ["Success Rate", "Accuracy", "Efficiency"],
        datasets: [
          {
            label: "Multimodal Processing",
            data: [48.36, 57.10, 59.13],
            backgroundColor: "rgba(79, 70, 229, 0.2)",
            borderColor: "rgba(79, 70, 229, 1)",
            borderWidth: 1
          },
          {
            label: "Edge Deployment",
            data: [48.82, 57.17, 58.81],
            backgroundColor: "rgba(99, 102, 241, 0.2)",
            borderColor: "rgba(99, 102, 241, 1)",
            borderWidth: 1
          },
          {
            label: "Bias Detection",
            data: [49.07, 57.34, 58.89],
            backgroundColor: "rgba(165, 180, 252, 0.2)",
            borderColor: "rgba(165, 180, 252, 1)",
            borderWidth: 1
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          r: {
            beginAtZero: true,
            max: 100,
            ticks: {
              callback: val => `${val}%`
            }
          }
        }
      }
    });
  </script>
</body>
</html> 